{% extends "base.html" %}

{% block title %}School Details | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 25px;
    }

    .page-header h1 {
        margin: 0 0 6px;
        font-size: 28px;
        font-weight: 700;
        color: #1f2933;
    }

    .page-header p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 15px;
        border-radius: 8px;
        text-decoration: none;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .btn-secondary {
        background: #ffffff;
        color: #374151;
        border-color: #d1d5db;
    }

    .btn-secondary:hover {
        background: #f9fafb;
        color: #1f2933;
    }

    .school-banner {
        background: #1f2933;
        color: #ffffff;
        border-radius: 12px;
        padding: 25px 28px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .school-banner-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .school-icon {
        width: 58px;
        height: 58px;
        border-radius: 12px;
        background: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        flex-shrink: 0;
    }

    .school-banner h2 {
        margin: 0 0 5px;
        font-size: 21px;
        font-weight: 700;
    }

    .school-banner p {
        margin: 0;
        color: #d1d5db;
        font-size: 12px;
    }

    .active-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border-radius: 20px;
        background: #dcfce7;
        color: #166534;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .active-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #16a34a;
    }

    .inactive-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border-radius: 20px;
        background: #fee2e2;
        color: #991b1b;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .inactive-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #dc2626;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 19px;
    }

    .stat-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #f3f4f6;
        color: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }

    .stat-card h3 {
        margin: 0;
        font-size: 25px;
        color: #1f2933;
        font-weight: 700;
    }

    .stat-card p {
        margin: 3px 0 0;
        font-size: 11px;
        color: #6b7280;
    }

    .content-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 20px;
        margin-bottom: 24px;
    }

    .card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
    }

    .card-header {
        padding: 18px 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .card-header h2 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 700;
        color: #1f2933;
    }

    .card-header p {
        margin: 0;
        font-size: 11px;
        color: #6b7280;
    }

    .card-body {
        padding: 20px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 13px 0;
        border-bottom: 1px solid #f0f1f3;
    }

    .detail-row:first-child {
        padding-top: 0;
    }

    .detail-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .detail-label {
        color: #6b7280;
        font-size: 11px;
    }

    .detail-value {
        color: #1f2933;
        font-size: 12px;
        font-weight: 600;
        text-align: right;
        word-break: break-word;
    }

    .account-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #166534;
        font-size: 11px;
        font-weight: 600;
    }

    .account-status i {
        font-size: 9px;
    }

    .reports-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
    }

    .reports-header {
        padding: 18px 20px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    .reports-header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #1f2933;
    }

    .reports-header span {
        font-size: 11px;
        color: #6b7280;
    }

    .table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        padding: 12px 18px;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    td {
        padding: 14px 18px;
        font-size: 12px;
        color: #374151;
        border-bottom: 1px solid #f0f1f3;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background: #fafafa;
    }

    .report-period {
        font-weight: 600;
        color: #1f2933;
    }

    .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .status-generated {
        color: #92400e;
        background: #fef3c7;
    }

    .status-prepared {
        color: #1d4ed8;
        background: #dbeafe;
    }

    .status-submitted {
        color: #047857;
        background: #d1fae5;
    }

    .status-reviewed {
        color: #166534;
        background: #dcfce7;
    }

    .status-rejected {
        color: #b91c1c;
        background: #fee2e2;
    }

    .empty-state {
        padding: 45px 20px;
        text-align: center;
    }

    .empty-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #f3f4f6;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 13px;
        font-size: 19px;
    }

    .empty-state h3 {
        margin: 0 0 6px;
        font-size: 14px;
        color: #1f2933;
    }

    .empty-state p {
        margin: 0;
        font-size: 11px;
        color: #6b7280;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #6b7280;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 18px;
    }

    .back-link:hover {
        color: #1f2933;
    }

    @media (max-width: 1000px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .content-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 700px) {
        .page-header {
            flex-direction: column;
        }

        .school-banner {
            align-items: flex-start;
            flex-direction: column;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .header-actions {
            width: 100%;
        }

        .header-actions .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}

<a href="{{ url_for('schools') }}" class="back-link">
    <i class="fa-solid fa-arrow-left"></i>
    Back to Schools
</a>

<div class="page-header">
    <div>
        <h1>School Details</h1>
        <p>View school account information and monthly reporting activity.</p>
    </div>

    <div class="header-actions">
        <a href="{{ url_for('schools') }}" class="btn btn-secondary">
            <i class="fa-solid fa-school"></i>
            All Schools
        </a>
    </div>
</div>

<div class="school-banner">

    <div class="school-banner-left">

        <div class="school-icon">
            <i class="fa-solid fa-school"></i>
        </div>

        <div>
            <h2>{{ school.name }}</h2>
            <p>School account and reporting information</p>
        </div>

    </div>

    <div>

        {% if school.is_active %}

        <span class="active-badge">
            <span class="active-dot"></span>
            Active
        </span>

        {% else %}

        <span class="inactive-badge">
            <span class="inactive-dot"></span>
            Inactive
        </span>

        {% endif %}

    </div>

</div>

<div class="stats-grid">

    <div class="stat-card">

        <div class="stat-card-top">
            <div class="stat-icon">
                <i class="fa-solid fa-file-lines"></i>
            </div>
        </div>

        <h3>{{ reports|length }}</h3>
        <p>Total Reports</p>

    </div>

    <div class="stat-card">

        <div class="stat-card-top">
            <div class="stat-icon">
                <i class="fa-solid fa-clock"></i>
            </div>
        </div>

        <h3>
            {{ reports|selectattr("status", "equalto", "prepared")|list|length }}
        </h3>

        <p>Awaiting School</p>

    </div>

    <div class="stat-card">

        <div class="stat-card-top">
            <div class="stat-icon">
                <i class="fa-solid fa-file-signature"></i>
            </div>
        </div>

        <h3>
            {{ reports|selectattr("status", "equalto", "submitted")|list|length }}
        </h3>

        <p>Signed Reports Submitted</p>

    </div>

    <div class="stat-card">

        <div class="stat-card-top">
            <div class="stat-icon">
                <i class="fa-solid fa-circle-check"></i>
            </div>
        </div>

        <h3>
            {{ reports|selectattr("status", "equalto", "reviewed")|list|length }}
        </h3>

        <p>Reviewed Reports</p>

    </div>

</div>

<div class="content-grid">

    <div class="card">

        <div class="card-header">
            <h2>School Information</h2>
            <p>Information associated with this school.</p>
        </div>

        <div class="card-body">

            <div class="detail-row">

                <span class="detail-label">
                    School Name
                </span>

                <span class="detail-value">
                    {{ school.name }}
                </span>

            </div>

            <div class="detail-row">

                <span class="detail-label">
                    Contact Email
                </span>

                <span class="detail-value">
                    {{ school.contact_email or "Not provided" }}
                </span>

            </div>

            <div class="detail-row">

                <span class="detail-label">
                    Contact Phone
                </span>

                <span class="detail-value">
                    {{ school.contact_phone or "Not provided" }}
                </span>

            </div>

            <div class="detail-row">

                <span class="detail-label">
                    Account Status
                </span>

                <span class="detail-value">

                    {% if school.is_active %}

                    <span class="account-status">
                        <i class="fa-solid fa-circle"></i>
                        Active
                    </span>

                    {% else %}

                    <span style="color:#b91c1c;">
                        Inactive
                    </span>

                    {% endif %}

                </span>

            </div>

            <div class="detail-row">

                <span class="detail-label">
                    Created
                </span>

                <span class="detail-value">

                    {% if school.created_at %}
                        {{ school.created_at.strftime("%d %b %Y") }}
                    {% else %}
                        —
                    {% endif %}

                </span>

            </div>

        </div>

    </div>

    <div class="card">

        <div class="card-header">
            <h2>School Login Account</h2>
            <p>Account currently associated with this school.</p>
        </div>

        <div class="card-body">

            {% if school.users %}

                {% for user in school.users %}

                <div class="detail-row">

                    <span class="detail-label">
                        Username
                    </span>

                    <span class="detail-value">
                        {{ user.username }}
                    </span>

                </div>

                <div class="detail-row">

                    <span class="detail-label">
                        Role
                    </span>

                    <span class="detail-value">
                        {{ user.role|title }}
                    </span>

                </div>

                <div class="detail-row">

                    <span class="detail-label">
                        Account Status
                    </span>

                    <span class="detail-value">

                        {% if user.is_active %}

                        <span class="account-status">
                            <i class="fa-solid fa-circle"></i>
                            Active
                        </span>

                        {% else %}

                        <span style="color:#b91c1c;">
                            Inactive
                        </span>

                        {% endif %}

                    </span>

                </div>

                <div class="detail-row">

                    <span class="detail-label">
                        Password Status
                    </span>

                    <span class="detail-value">

                        {% if user.must_change_password %}

                        <span style="color:#92400e;">
                            Temporary password
                        </span>

                        {% else %}

                        <span class="account-status">
                            <i class="fa-solid fa-circle-check"></i>
                            Password changed
                        </span>

                        {% endif %}

                    </span>

                </div>

                <div class="detail-row">

                    <span class="detail-label">
                        Last Login
                    </span>

                    <span class="detail-value">

                        {% if user.last_login %}
                            {{ user.last_login.strftime("%d %b %Y %H:%M") }}
                        {% else %}
                            Never
                        {% endif %}

                    </span>

                </div>

                {% endfor %}

            {% else %}

            <div class="empty-state">

                <div class="empty-icon">
                    <i class="fa-solid fa-user-slash"></i>
                </div>

                <h3>No login account</h3>

                <p>
                    No school user account is currently linked to this school.
                </p>

            </div>

            {% endif %}

        </div>

    </div>

</div>

<div class="reports-card">

    <div class="reports-header">

        <div>
            <h2>Monthly Reports</h2>
        </div>

        <span>
            {{ reports|length }} report{% if reports|length != 1 %}s{% endif %}
        </span>

    </div>

    {% if reports %}

    <div class="table-wrapper">

        <table>

            <thead>

                <tr>
                    <th>Reporting Period</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Submitted</th>
                </tr>

            </thead>

            <tbody>

                {% for report in reports %}

                <tr>

                    <td>

                        <span class="report-period">
                            {{ report.month }} {{ report.year }}
                        </span>

                    </td>

                    <td>

                        {% if report.status == "generated" %}

                        <span class="status status-generated">
                            <span class="status-dot"></span>
                            Generated
                        </span>

                        {% elif report.status == "prepared" %}

                        <span class="status status-prepared">
                            <span class="status-dot"></span>
                            Waiting for School
                        </span>

                        {% elif report.status == "submitted" %}

                        <span class="status status-submitted">
                            <span class="status-dot"></span>
                            Signed Report Submitted
                        </span>

                        {% elif report.status == "reviewed" %}

                        <span class="status status-reviewed">
                            <span class="status-dot"></span>
                            Reviewed
                        </span>

                        {% elif report.status == "rejected" %}

                        <span class="status status-rejected">
                            <span class="status-dot"></span>
                            Rejected
                        </span>

                        {% else %}

                        <span class="status">
                            <span class="status-dot"></span>
                            {{ report.status|title }}
                        </span>

                        {% endif %}

                    </td>

                    <td>

                        {% if report.created_at %}
                            {{ report.created_at.strftime("%d %b %Y") }}
                        {% else %}
                            —
                        {% endif %}

                    </td>

                    <td>

                        {% if report.submitted_at %}

                            {{ report.submitted_at.strftime("%d %b %Y %H:%M") }}

                        {% else %}

                            <span style="color:#9ca3af;">
                                Not submitted
                            </span>

                        {% endif %}

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

    {% else %}

    <div class="empty-state">

        <div class="empty-icon">
            <i class="fa-solid fa-file-circle-question"></i>
        </div>

        <h3>No reports yet</h3>

        <p>
            Monthly reports for this school will appear here once generated.
        </p>

    </div>

    {% endif %}

</div>

{% endblock %}